<!--  -->
<template>
  <div>
      <div class="container">
          <div class="left"></div>
          <div class="center">
              <div class="center_left_outsaide">
                <div class="center_top">
                    <div class="content_left"> 
                        <!-- 轮播图 -->
                        <div class="lbt_container">
                            <el-carousel indicator-position="outside" height="200px">
                                <el-carousel-item v-for="item in 4" :key="item">
                                <h3>{{ item }}</h3>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div class="newArticle_container">
                            <div class="newArticle" v-for="(item,index) in articleNewTow" :key="index">
                                    {{item.name}}
                            </div>
                    </div>
                    </div>
                </div>
              <!-- 文章 -->
                <div class="center_center">
                    <div class="title">
                        wenzhang
                    </div>
                    <div class="xxx">
                        <ul>
                            <li v-for="(item,index) in 6" :key="index">
                                <div class="article_container">
                                    <div>
                                        <img src="" alt="">
                                    </div>
                                    <div>
                                        标题
                                    </div>
                                    <div>
                                        neirong 
                                    </div>
                                    <div>
                                        <div>
                                            阅读
                                        </div>
                                        <div>
                                            点赞
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
              </div>



              <div class="content_right">

              </div>
          </div>
          <div class="right"></div>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
        articleList:[],
        articleNewTow:[],
    };
  },

  components: {},

  computed: {},

  created(){
      this.getArticleList()
  },
  methods: {
      async getArticleList(){
          await this.$http.get('/article').then(res=>{
              this.articleList = res.data.data;
              this.articleNewTow = res.data.data.slice(1,3)
              console.log(this.articleList);
          })
      }
  }
}

</script>
<style lang='less' scoped>
    .container{
        display: flex;
        justify-content: space-between;
        height: 1200px;
        .left{
            width: 20%;
            background-color: rgb(240, 240, 240);
        }
        .center{
            width:60%;
            height: 800px;
            border: 1px solid gray;
            box-shadow: 2px 2px 4px #000000;
            display: flex;
            
            // 中上轮播
            .center_left_outsaide{
                width: 70%;
                display: flex;
                flex-flow: wrap;
                .center_top{
                    width: 100%;
                    display: flex;
                    height: 250px;
                    border: 1px solid black;
                    .content_left{
                        display: flex;
                        width: 100%;
                        .lbt_container{
                            background-color: red;
                            width: 80%;
                            margin: 3px;
                            height: 200px;
                        }
                        .newArticle_container{
                            width: 30%;
                            margin: 3px;
                            height: 200px;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            .newArticle{
                                height: 90px;
                                border: 1px solid black;
                            }
                        }
                    
                    }
                }
                // 中间文章
                .center_center{
                    width: 100%;
                    background-color: cadetblue;
                    .title{

                    }
                    .xxx{
                        
                        background-color: chartreuse;
                        ul{
                            
                            margin-left: -5%;
                            width: 100%;
                            display: flex;
                            flex-wrap:wrap;
                            justify-content: space-between;
                            li{
                                padding-top: 20px;
                                width: 30%;
                                list-style: none;
                                .article_container{
                                    height: 350px;
                                    background-color: blue;
                                }
                            }
                        }
                        
                        
                    }
                }
            }
            

            // 中间30%
            .content_right{
                width: 30%;
                height: 100%;
                // background-color: green;
            }
        }
        .right{
            width: 20%;
            background-color: rgb(240, 240, 240);
        }
    }
</style>